import React from "react";
import ChildCom1 from "./ChildCom1";
import ChildCom2 from "./ChildCom2";
import withMouseMove from "./WithMouseMove";

const NewChildCom1 = withMouseMove(ChildCom1);
const NewChildCom2 = withMouseMove(ChildCom2);
export default function Test1() {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "space-between",
        width: "850px",
      }}
    >
      <h2>使用HOC的方式提取公共代码</h2>
      <p>
        什么时候使用 *Render Props* ？什么时候使用 *HOC* ？ 一般来讲，**
        <u>
          *Render Props* 应用于组件之间功能逻辑完全相同，仅仅是渲染的视图不同
        </u>
        **。这个时候我们可以通过 *Render Props* 来指定要渲染的视图是什么。 而
        *HOC*
        一般是抽离部分公共逻辑，也就是说组件之间有一部分逻辑相同，但是各自也有自己独有的逻辑，那么这个时候使用
        *HOC* 比较合适，可以在原有的组件的基础上做一个增强处理。
      </p>
      <div>
        <NewChildCom1 />
        <NewChildCom2 />
      </div>
    </div>
  );
}
